12.路由 hash 和 history

对比

hash

1. hash 值指的是地址中#号以及后面的字符，也称作锚点或散列值
2. hash 值不会发送到服务器，改变 hash 值浏览器不会重新加载
3. location.hash 值的变化会直接反应到浏览器地址栏

history

1. 我们操作 History 对象 就相当于操作浏览器上对应的 url，是利用了浏览器的 window.history 属性

hash 模拟 history 的前进和后退

栈实现

// 监听 hash 变化，点击浏览器的前进后退会触发
window.addEventListener("hashchange", function () {
  // 获取 hash 值，不包括#号，例如：www.baidu.com/#home，获取到 home 字符串标识
  var hashVal = window.location.hash.split("#")[1];
  // 获取对应页面的标识
  var showPage = document.querySelector("." + hashVal);
  // 根据 hash 值变化，展示不同页面内容。没有就 404
  if (showPage) {
    showPage.style.display = "block";
  } else {
    document.querySelector(".error").style.display = "block";
  }
});

history 要配置额外的 nginx 路由

• history 模式的问题 通过 history api，我们丢掉了丑陋的 #，但是它也有个问题：不怕前进，不怕后退，就怕刷新，F5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。 在 hash 模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题。 但是在 history 下，你可以自由的修改 path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个 404 来。